<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}

			#r1,
			#r2,
			#r3 {
				width: 100px;
				line-height: 200px;
				position: fixed;
				text-align: center;
			}


			body,
			html {
				width: 100%;
				height: 100%;
			}

			.cav {
				position: absolute;
				top: 0;
				left: 0;
			}

			#wrapper {
				position: relative;
				width: 100px;
				height: 100px;
			}

			#progressbar {
				position: absolute;
				top: 0%;
				left: 50%;
				margin-left: -90px;
				margin-top: -10px;
				height: 10px;
				width: 150px;

			}

			/*在进度条元素上调用动画*/
			#fill {
				animation: move 2s;
				text-align: center;
				background-color: #6caf00;
			}

			/*实现元素宽度的过渡动画效果*/
			@keyframes move {
				0% {
					width: 0;

				}

				100% {
					width: 100%;
				}
			}
		</style>
	</head>
	<body>
		<canvas class="cav"></canvas>
		<!--外层容器-->
		<div id="wrapper">
			<!--进度条容器-->
			<div id="progressbar" class="11111">
				<!--用来模仿进度条推进效果的进度条元素-->
				<div id="fill"></div>
			</div>
			<img src="老鼠.png" id="plane" width="100" height="100" style="z-index: 1;" />
		</div>

		<img src="胡萝卜.png" width="100" height="100" id="huluobo"/>

		<div class="div1">
			<img src="兔子.png" class="ribbit" id="r1">
		</div>
		<div class="div1">
			<img src="兔子.png" class="ribbit" id="r2">
		</div>
		<div class="div1">
			<img src="兔子.png" class="ribbit" id="r3">
		</div>
		<script src="jquery.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			

			window.onload = function() {
				
				var div1 = document.getElementsByClassName('ribbit');
				var r1 = document.getElementById('r1');
				var r2 = document.getElementById('r2');
				var r3 = document.getElementById('r3');
				var plane = document.getElementById('wrapper');
				var progressbar = document.getElementsByClassName('11111');
				var fill11 = document.getElementById('fill');
				var huluobo = document.getElementById('huluobo');
				//飞机样式设置
				plane.style.position = 'fixed';
				plane.style.top = '0px';
				plane.style.left = '0px';

				var w = document.documentElement.clientWidth;
				var h = document.documentElement.clientHeight;

				//如果视口高度宽度改变，重新获取当前视口的宽度和高度
				window.onresize = function() {

					
					
					//获取视口高度宽度
					w = document.documentElement.clientWidth;
					h = document.documentElement.clientHeight;
					//获取当前飞机位置
					var top = parseInt(plane.style.top);
					var left = parseInt(plane.style.left);
					var bottom = h - (top + 100);
					var right = w - (left + 100);

					//判断飞机是否在视口外显示，保持飞机一直在视口内显示
					if (right < 0) {
						plane.style.left = (w - 150) + 'px';
					}
					if (bottom < 0) {
						plane.style.top = (h - 150) + 'px';
					}
				}

				var top_huluobo = parseInt((h - 100 + 1) * Math.random());
				var left_buhuobo = parseInt((w - 100 + 1) * Math.random());
				huluobo.style.position='fixed';
				huluobo.style.top=top_huluobo+'px';
				huluobo.style.left=left_buhuobo+'px';
				

				//设置div1每1秒钟变换一次位置
				window.setInterval(function() {
					var top = parseInt((h - 200 + 1) * Math.random());
					var left = parseInt((w - 100 + 1) * Math.random());
					r1.style.top = top + 'px';
					r1.style.left = left + 'px';
					r1.style.transform = "translate(" + top + "," + left + ")";
					r1.style.transitionDuration = "1s";

				}, 1200)
				window.setInterval(function() {
					var top = parseInt((h - 200 + 1) * Math.random());
					var left = parseInt((w - 100 + 1) * Math.random());

					r2.style.top = top + 'px';
					r2.style.left = left + 'px';
					r2.style.transform = "translate(" + top + "," + left + ")";
					r2.style.transitionDuration = "1s";

				}, 1200)
				window.setInterval(function() {
					var top = parseInt((h - 200 + 1) * Math.random());
					var left = parseInt((w - 100 + 1) * Math.random());

					r3.style.top = top + 'px';
					r3.style.left = left + 'px';
					r3.style.transform = "translate(" + top + "," + left + ")";
					r3.style.transitionDuration = "1s";

				}, 1200);

				function getPos(ev) {
					var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
					var scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft;

					return {
						x: ev.clientX + scrollLeft,
						y: ev.clientY + scrollTop
					};
				}
				var width1 = 100;
				document.onmousemove = function(ev) {
					var oEvent = ev || event;
					var pos = getPos(oEvent);

					plane.style.left = pos.x + 'px';
					plane.style.top = pos.y + 'px';

					//每次移动鼠标取老鼠当前位置
					var top = parseInt(plane.style.top);
					var left = parseInt(plane.style.left);
					var bottom = top + 100;
					var right = (left + 100);
					
					//获取兔子当前位置
					var top_r1=parseInt(r1.style.top);
					var left_r1=parseInt(r1.style.left);
					var bottom_r1=(top_r1 + 200);
					var right_r1= (left_r1 + 100);
					
					var top_r2=parseInt(r2.style.top);
					var left_r2=parseInt(r2.style.left);
					var bottom_r2=(top_r2 + 200);
					var right_r2= (left_r2 + 100);
					
					var top_r3=parseInt(r3.style.top);
					var left_r3=parseInt(r3.style.left);
					var bottom_r3=(top_r3 + 200);
					var right_r3=(left_r3 + 100);

					
					//判断老鼠是否碰到兔子边界
					if(top == bottom_r1 || top == bottom_r2 || top == bottom_r3
						|| bottom == top_r1 || bottom == top_r2 || bottom == top_r3 
						|| left == right_r1 || left == right_r2 || left == right_r3
						|| right == left_r1 || right == left_r2 || right == left_r3) {
							
							width1 = width1 - 10;
							
							fill.innerHTML= width1 + "%";
							if (width1 <= 50) {
								fill.style.backgroundColor="yellow";
							} else if (width1 <= 20) {
								fill.style.backgroundColor="red";
							}
							
							if (width1 == 0) { 
								alert("game over");
								location.reload();
								return;
							}
							
					}
					
					if (top==(top_huluobo+100) || left==(left_buhuobo+100) || 
						bottom==top_huluobo || right == left_buhuobo) {
							alert("success!!!");
							location.reload();
							return;
						}

				};


				;
				$(function() {
					var $cav = $('.cav');
					var $cavParent = $cav.parent();

					var cav = $cav[0].getContext('2d'),
						backColor = '#f7fafc', //背景颜色    
						frontColor = 'rgba(200, 200, 200, 1)', //点颜色    
						overPoint = -10000,
						mouseArr = [overPoint, overPoint, 200]; //鼠标位置和极限半径    
					$('body').css('background', backColor);

					var cavW = $cavParent.width(),
						cavH = $cavParent.height(),
						dotArr = [],
						bezierArr = [],
						num = 20, // 点的个数  
						ran = 500;
					step = 500;

					$cav.attr({
						'width': cavW,
						'height': cavH,
					}).css({
						'background': backColor,
					});

					$cav.on('mousemove', function(e) {
						mouseArr[0] = e.offsetX;
						mouseArr[1] = e.offsetY;
					});
					$cav.on('mouseout', function(e) {
						mouseArr[0] = overPoint;
						mouseArr[1] = overPoint;
					});

					//生成随机点    
					for (var i = 0; i < num; i++) {
						var cavL1 = Math.random() * cavW,
							cavT1 = Math.random() * cavH,
							cavL2 = Math.random() * cavW,
							cavT2 = Math.random() * cavH,
							cavL3 = Math.random() * cavW,
							cavT3 = Math.random() * cavH,
							cavL4 = Math.random() * cavW,
							cavT4 = Math.random() * cavH,
							cavO = Math.random(), //透明度    
							cavR = cavO * 8 + 2, //尺寸    
							cavD = parseInt(Math.random() * ran) + step; //点的个数    
						cavT = 0; //自身计数器    

						dotArr[i] = [
							[cavL1, cavT1] /*0*/ ,
							[cavL2, cavT2] /*1*/ ,
							[cavL3, cavT3] /*2*/ ,
							[cavL4, cavT4] /*3*/ , cavO /*4*/ , cavR /*5*/ , cavD /*6*/ , cavT /*7*/
						]; //存储坐标    

						var cp = [new Point2D(dotArr[i][0][0], dotArr[i][0][1]), new Point2D(dotArr[i][1][0], dotArr[i][1][1]), new Point2D(
							dotArr[i][2][0], dotArr[i][2][1]), new Point2D(dotArr[i][3][0], dotArr[i][3][1])];
						var numberOfPoints = dotArr[i][6];
						var curve = [];
						ComputeBezier(cp, numberOfPoints, curve);
						bezierArr[i] = curve;
					}

					setInterval(function() {
						cav.clearRect(0, 0, cavW, cavH);
						//移动    
						for (var i = 0; i < num; i++) {
							if (dotArr[i][7] >= dotArr[i][6]) { //走到最后一个点    
								var cavL1 = Math.random() * cavW,
									cavT1 = Math.random() * cavH,
									cavL2 = Math.random() * cavW,
									cavT2 = Math.random() * cavH,
									cavL3 = Math.random() * cavW,
									cavT3 = Math.random() * cavH,
									cavL4 = Math.random() * cavW,
									cavT4 = Math.random() * cavH,
									cavO = Math.random(), //透明度    
									cavR = cavO * 8 + 2, //尺寸    
									cavD = parseInt(Math.random() * ran) + step; //点的个数    
								cavT = 0; //自身计数器    

								dotArr[i] = [
									[bezierArr[i][dotArr[i][6] - 1].x, bezierArr[i][dotArr[i][6] - 1].y] /*0*/ ,
									[cavL2, cavT2] /*1*/ ,
									[cavL3, cavT3] /*2*/ ,
									[cavL4, cavT4] /*3*/ , dotArr[i][4] /*4*/ , dotArr[i][5] /*5*/ , cavD /*6*/ , cavT /*7*/
								]; //存储坐标    

								var cp = [new Point2D(dotArr[i][0][0], dotArr[i][0][1]), new Point2D(dotArr[i][1][0], dotArr[i][1][1]),
									new Point2D(
										dotArr[i][2][0], dotArr[i][2][1]), new Point2D(dotArr[i][3][0], dotArr[i][3][1])
								];
								var numberOfPoints = dotArr[i][6];
								var curve = [];
								ComputeBezier(cp, numberOfPoints, curve);
								bezierArr[i] = curve;
							} else {
								// 和鼠标交互  
								if (Math.pow(bezierArr[i][dotArr[i][7]].x - mouseArr[0], 2) + Math.pow(bezierArr[i][dotArr[i][7]].y -
										mouseArr[1], 2) <= Math.pow(mouseArr[2], 2)) {
									cav.beginPath();
									var globalAlpha = 1 - Math.sqrt(Math.pow(bezierArr[i][dotArr[i][7]].x - mouseArr[0], 2) + Math.pow(
										bezierArr[i][dotArr[i][7]].y - mouseArr[1], 2)) / 100 / 2;
									globalAlpha = globalAlpha < 0 ? 0 : globalAlpha;
									cav.globalAlpha = globalAlpha;
									cav.strokeStyle = frontColor;
									cav.lineTo(mouseArr[0], mouseArr[1]);
									cav.lineTo(bezierArr[i][dotArr[i][7]].x, bezierArr[i][dotArr[i][7]].y);
									cav.stroke();
								}
								// 点与点交互  
								for (var j = 0; j < num; j++) {
									if (i != j && dotArr[j][7] < dotArr[j][6]) { //走到最后一个点且不是同一个点    
										if (Math.pow(bezierArr[i][dotArr[i][7]].x - bezierArr[j][dotArr[j][7]].x, 2) + Math.pow(bezierArr[i][
												dotArr[i][7]
											].y - bezierArr[j][dotArr[j][7]].y, 2) <= Math.pow(mouseArr[2], 2)) {
											cav.beginPath();
											var globalAlpha = 1 - Math.sqrt(Math.pow(bezierArr[i][dotArr[i][7]].x - bezierArr[j][dotArr[j][7]].x, 2) +
												Math.pow(bezierArr[i][dotArr[i][7]].y - bezierArr[j][dotArr[j][7]].y, 2)) / 100 / 2;
											globalAlpha = globalAlpha < 0 ? 0 : globalAlpha;
											cav.globalAlpha = globalAlpha;
											cav.strokeStyle = frontColor;
											cav.lineTo(bezierArr[j][dotArr[j][7]].x, bezierArr[j][dotArr[j][7]].y);
											cav.lineTo(bezierArr[i][dotArr[i][7]].x, bezierArr[i][dotArr[i][7]].y);
											cav.stroke();
										}
									}
								}
								cav.beginPath();
								cav.globalAlpha = dotArr[i][4] * .6;
								cav.fillStyle = frontColor;
								cav.arc(bezierArr[i][dotArr[i][7]].x, bezierArr[i][dotArr[i][7]].y, dotArr[i][5], 0, 2 * Math.PI);
								cav.fill();
							}
							dotArr[i][7] += 1;

						}
					}, 20);




					function Point2D(x, y) {
						this.x = x || 0.0;
						this.y = y || 0.0;
					}

					function PointOnCubicBezier(cp, t) { //cp为4个Point2D点，0<=t<=1    
						var ax, bx, cx;
						var ay, by, cy;
						var tSquared, tCubed;
						var result = new Point2D;

						//计算多项式系数     
						cx = 3.0 * (cp[1].x - cp[0].x);
						bx = 3.0 * (cp[2].x - cp[1].x) - cx;
						ax = cp[3].x - cp[0].x - cx - bx;

						cy = 3.0 * (cp[1].y - cp[0].y);
						by = 3.0 * (cp[2].y - cp[1].y) - cy;
						ay = cp[3].y - cp[0].y - cy - by;

						//计算位于参数值t的曲线点    
						tSquared = t * t;
						tCubed = tSquared * t;

						result.x = (ax * tCubed) + (bx * tSquared) + (cx * t) + cp[0].x;
						result.y = (ay * tCubed) + (by * tSquared) + (cy * t) + cp[0].y;

						return result;
					}

					//ComputeBezier以控制点cp所产生的曲线点，填入Point2D的阵列，必须分配足够的记忆体，其<sizeof(Point2D) numberOfPoints>    
					function ComputeBezier(cp, numberOfPoints, curve) {
						var dt;
						var i;

						dt = 1.0 / (numberOfPoints - 1);

						for (i = 0; i < numberOfPoints; i++)
							curve[i] = PointOnCubicBezier(cp, i * dt);
					}
				});
				var progressbar = {
					init: function() {
						var fill = document.getElementById('fill');
						var count = 0;
						//通过间隔定时器实现百分比文字效果,通过计算CSS动画持续时间进行间隔设置
						var timer = setInterval(function(e) {
							count++;
							fill.innerHTML = count + '%';
							if (count === 100) clearInterval(timer);
						}, 17);
					}
				};
				progressbar.init();
			}
		</script>
	</body>
</html>
